<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Resizable Div Container</title>
  <meta name="description" content="可以对div进行拖动缩放大小">
  <style type="text/css">
    #container.resizable {
      width: 100%;
      height: 100%;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: moz-none;
      -ms-user-select: none;
      user-select: none;
      position: relative;
      opacity: 0;
    }

    #container.resizable #left {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 85%;
      overflow: hidden;
      background-color: #ccc;
    }

    #container.resizable #right {
      position: absolute;
      right: 0px;
      top: 0px;
      bottom: 0px;
      width: 85%;
      background: #fff;
      padding-left: 3px;
      overflow: hidden;
      background-color: #ddd;
    }

    #container.resizable #resizor {
      position: absolute;
      top: 50%;
      right: 85%;
      cursor: w-resize;
      background-color: #666;
      border-radius: 5px;
      margin-top: -10px;
      width: 6px;
      height: 20px;
      background-size: cover;
      background-position: center;
      z-index: 99999;
    }
  </style>
</head>

<body>
  <div id="container" class="resizable">
    <!-- Left side -->
    <div id="left">
      <p>左侧内容</p>
    </div>
    <div id="resizor" title="拖动改变宽度"></div>
    <!-- Right side -->
    <div id="right">
      <p>右侧内容</p>
    </div>
  </div>
  <script type="text/javascript">
    var isResizing = false;
    var lastDownX = 0;
    window.onload = function () {
      var container = document.getElementById('container')
      console.log(container.offsetWidth)
      // 根据当前窗口大小设定 container 的高度
      container.style.height = window.innerHeight - 20 + 'px'
      container.style.opacity = 1

      var left = document.getElementById('left')
      var right = document.getElementById('right')
      var resizor = document.getElementById('resizor')

      resizor.addEventListener('mousedown', function (e) {
        isResizing = true;
        lastDownX = e.clientX;
      });

      window.addEventListener('mousemove', function (e) {
        if (!isResizing) return true;
        var offsetRight = container.offsetWidth - (e.clientX - container.offsetLeft);
        // 判断左右拖动范围
        if (offsetRight < 0 || offsetRight >= container.offsetWidth) {
          isResizing = false;
          return true;
        }
        left.style.right = offsetRight + 'px'
        resizor.style.right = offsetRight + 'px'
        right.style.width = offsetRight + 'px'
      })

      window.addEventListener('mouseup', function (e) {
        isResizing = false;
      });
    }
  </script>
</body>

</html>